<template>
	<view v-if="vuex_isMobile" class="">
		<view class="news-detail-m">
			<view class="index-right-title">
				您现在的位置：新闻中心 > 医院新闻 > 正文
			</view>
			<view class="news-detail-title-m">
				{{detailInfo.title}}
			</view>
			<view class="news-detail-time-m">
				时间：{{showTime(detailInfo.createTime)}} 作者：{{detailInfo.author}}
			</view>
			<view class="rich">
				<rich-text :nodes="detailInfo.article"></rich-text>
			</view>
		</view>
		<view class="foot">
			<view class="back" @click="back">
				{{`< 返回上一页`}}
			</view>
		</view>
		<foot-bar />
	</view>
	<view v-else class="">
		<view class="news-detail">
			<view class="index-right-title">
				您现在的位置：新闻中心 > 医院新闻 > 正文
			</view>
			<view class="news-detail-title">
				{{detailInfo.title}}
			</view>
			<view class="news-detail-time">
				时间：{{showTime(detailInfo.createTime)}} 作者：{{detailInfo.author}}
			</view>
			<view class="">
				<rich-text :nodes="detailInfo.article"></rich-text>
			</view>
		</view>
		<view class="foot">
			<view class="back" @click="back">
				{{`< 返回上一页`}}
			</view>
		</view>
		<foot-bar />
	</view>

</template>

<script>
	import footBar from "@/pages/bottom/foot-bar.vue"
	import {
		getNewsDetail,
	} from "@/common/api.js";
	export default {
		components: {
			footBar
		},
		data() {
			return {
				detailInfo: {}
			}
		},
		onLoad(option) {
			let newDetail = uni.getStorageSync('newDetail')
			if (newDetail) {
				this.detailInfo = newDetail
			}
			getNewsDetail({
				id: option.id
			}).then(res => {
				uni.setStorageSync('newDetail', res.data)
				this.detailInfo = res.data
				const regex = new RegExp('<img', 'gi');
				this.detailInfo.article = this.detailInfo.article.replace(regex, `<img style="max-width: 100%;"`)
			})
		},
		onShow() {},
		computed: {
			showTime() {
				return (timestamp) => {
					const date = new Date(timestamp);
					return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-detail {
		width: 1200px;
		margin: 0 auto;

		.index-right-title {
			font-weight: 400;
			font-size: 12px;
			color: #686868;
			line-height: 16px;
			padding-top: 15px;
			cursor: pointer;
		}
	}

	.news-detail-m {
		width: 100%;
		margin: 0 auto;

		.index-right-title {
			background-color: #193F93;
			font-weight: 400;
			font-size: 43px;
			color: #FFFFFF;
			line-height: 150px;
			padding-left: 72px;
			cursor: pointer;
		}
			
		.rich {
			padding: 0 79px 80px;
		}
	}

	.news-detail-title-m {
		font-weight: 500;
		font-size: 54px;
		color: #434343;
		line-height: 77px;
		text-align: center;
		padding: 54px 79px;

	}
	.news-detail-title {
		font-weight: 500;
		font-size: 24px;
		color: #434343;
		line-height: 32px;
		text-align: center;
		padding: 20px 0;
	
	}

	.news-detail-time-m {
		font-weight: 400;
		font-size: 39px;
		color: #686868;
		line-height: 57px;
		text-align: center;
		margin-bottom: 72px;
	}
	
	.news-detail-time {
		font-weight: 400;
		font-size: 12px;
		color: #686868;
		line-height: 16px;
		text-align: center;
		margin-bottom: 30px;
	}

	.foot {
		display: flex;
		justify-content: center;
		margin-top: 60px;

		.back {
			cursor: pointer;
			width: 134px;
			line-height: 40px;
			border-radius: 4px 4px 4px 4px;
			border: 1px solid #D8D8D8;
			text-align: center;
			font-weight: 400;
			font-size: 14px;
			color: #434343;
		}
	}
</style>